<template>
	<view class="">

		<view class="wrap">
			<view style="background-color: #FFFFFF; position: sticky; top: 0;z-index: 2;">

				<u-tabs-swiper :list="tabs" ref="tabs" :current="current" keyName="name" :is-scroll="false"
					@change="change" activeColor="#20C3AA" inactiveColor="#606266" :bold="false">
				</u-tabs-swiper>

			</view>

			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(0)">
						<view v-if="unmessageList.length > 0">

							<view class="news_list" v-for="(item, index) in unmessageList" :key="index"
								@longpress="longclick(item)" @click="itemClick(item)">


								<!-- <view class="img"> -->
								<image :src="item.templateImg|mmvImageUrl" mode="scaleToFill"></image>


								<!-- <image src="../../../static/mine/message/wz_icon.png" mode="scaleToFill"
									v-if="item.type == 1"></image>

								<image src="../../../static/mine/message/qf_icon.png" mode="widthFix"
									v-else-if="item.type == 2"></image>

								<image src="../../../static/mine/message/zd_icon.png" mode="scaleToFill"
									v-else-if="item.type == 3"></image>

								<image src="../../../static/mine/message/nj_icon.png" mode="scaleToFill"
									v-else-if="item.type == 4"></image>

								<image src="../../../static/mine/message/xb_icon.png" mode="scaleToFill"
									v-else-if="item.type == 5"></image> -->
								<!-- </view> -->

								<view class="msg-item">
									<view class="msg-title">
										<view>{{item.templateName?item.templateName:''}}</view>
										<text>{{item.updateTime}}</text>
									</view>


									<view class="html-content">
										<rich-text :nodes="item.msgContent">
										</rich-text>
									</view>

								</view>
							</view>

							<!-- <u-loadmore :status="loadStatus[0]" @loadmore="reachBottom(0)"></u-loadmore> -->
						</view>

						<u-empty v-else></u-empty>

					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(1)">
						<view class="page-box" v-if="messageList.length > 0">

							<view class="news_list" v-for="(item, index) in messageList" :key="index"
								@longpress="longclick(item)" @click="itemClick(item)">

								<image :src="item.templateImg|mmvImageUrl" mode="scaleToFill"></image>

								<!-- <view class="img"> -->
								<!-- <image src="../../../static/mine/message/wz_icon.png" mode="scaleToFill"
									v-if="item.type == 1"></image>

								<image src="../../../static/mine/message/qf_icon.png" mode="scaleToFill"
									v-else-if="item.type == 2"></image>

								<image src="../../../static/mine/message/zd_icon.png" mode="scaleToFill"
									v-else-if="item.type == 3"></image>

								<image src="../../../static/mine/message/nj_icon.png" mode="scaleToFill"
									v-else-if="item.type == 4"></image>

								<image src="../../../static/mine/message/xb_icon.png" mode="scaleToFill"
									v-else-if="item.type == 5"></image> -->
								<!-- </view> -->

								<view class="msg-item">
									<view class="msg-title">
										<view>{{item.templateName?item.templateName:''}}</view>
										<text>{{item.updateTime}}</text>
									</view>

									<view class="html-content">
										<rich-text :nodes="item.msgContent">
										</rich-text>
									</view>
								</view>

							</view>

							<!-- <u-loadmore :status="loadStatus[1]" @loadmore="reachBottom(1)"></u-loadmore> -->
						</view>

						<u-empty v-else></u-empty>

					</scroll-view>
				</swiper-item>

			</swiper>



		</view>
		<u-modal title="提示" content="" :show="showdelete" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="close">

			<view style="text-align: center;font-size: 32upx;color: #A7A7A7;">是否确认删除?</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getMsg,
		updateReadStatus
	} from '@/api/user-api.js';

	export default {
		data() {
			return {
				tabs: [{
						name: '未读(0)'
					},
					{
						name: '已读(0)'
					}
				],
				current: 0,
				swiperCurrent: 0,
				unmessageList: [],
				messageList: [],
				dx: 0,
				loadStatus: ['loadmore', 'loadmore'],
				unPageNo: 1,
				readPageNo: 1,
				pageNo: 1,
				pageSize: 10,
				unReadCount: 0,
				readCount: 0,
				type: '0',
				showdelete: false,
				id: '',
			}
		},
		methods: {

			// tab栏切换
			change(index) {
				this.swiperCurrent = index;

				if (uni.$u.test.isEmpty(this.messageList)) {
					if (index == 1) {
						this.pageNo = this.readPageNo;
						this.type = '1';
						this.getData();
					}
				}

			},

			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},

			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

			getData() {
				getMsg({
					readStatus: this.type,
					// pageNum: this.pageNo,
					// pageSize: this.pageSize,
				}).then(res => {
					this.tabs[0].name = `未读(${res.unReadCount})`;
					this.tabs[1].name = `已读(${res.readCount})`;

					if (this.type == '0') {

						if (this.unPageNo == 1) {
							this.unmessageList = [];
							this.unPageNo++;

							console.log('第一页数据');

							this.loadStatus[0] = 'loadmore';

						} else {
							if (!uni.$u.test.isEmpty(res.rows)) {
								this.unPageNo++;

								console.log('有更多');

								this.loadStatus[0] = 'loadmore';
							} else {
								console.log('无更多');
								this.loadStatus[0] = 'nomore';
							}
						}

						this.unmessageList = this.unmessageList.concat(res.rows);

					} else {

						if (this.readPageNo == 1) {
							this.messageList = [];
							this.readPageNo++;

							this.loadStatus[1] = 'loadmore';

						} else {
							if (!uni.$u.test.isEmpty(res.rows)) {
								this.readPageNo++;

								this.loadStatus[1] = 'loadmore';
							} else {
								this.loadStatus[1] = 'nomore';
							}
						}

						this.messageList = this.messageList.concat(res.rows);
					}

				})
			},


			reachBottom(type) {
				// this.loadStatus[type] = 'loading';

				// switch (type) {
				// 	case 0:
				// 		this.pageNo = this.unPageNo;
				// 		this.type = '0';
				// 		this.getData();
				// 		break;
				// 	case 1:
				// 		this.pageNo = this.readPageNo;
				// 		this.type = '1';
				// 		this.getData();
				// 		break;
				// }
			},

			longclick(item) {
				// this.showdelete = true;
				// this.id = item.id;
			},

			itemClick(item) {
				console.log('type', this.type);
				if (this.type == 0) {
					console.log('请求读消息接口');
					updateReadStatus({
						id: item.id
					}).then(res => {

					})
				}

				uni.navigateTo({
					url: '/pagesB/message/message-detail' + uni.$u.queryParams(item),
				})

			},

			confirm() {
				this.showdelete = false;

				messageNoticedelete({
					id: this.id
				}).then(res => {

					uni.showToast({
						icon: 'none',
						title: '已删除'
					})

					if (this.swiperCurrent == 1) {
						this.readPageNo = 1;
						this.pageNo = this.readPageNo;
						this.type = '1';
					} else {
						this.unPageNo = 1;
						this.pageNo = this.unPageNo;
						this.type = '0';
					}
					this.getData();
				})


			},
			cancel() {
				this.showdelete = false;
			},
			close() {
				this.showdelete = false;
			}

		},

		onShow() {

			if (this.swiperCurrent == 0) {
				this.unPageNo = 1;
				this.pageNo = this.unPageNo;
				this.type = '0';
				this.getData();
			}
		}

	}
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex-grow: 1;
	}

	.swiper-item {
		height: 100%;
	}


	.news_list {
		height: 180upx;
		margin: 17upx 17upx 0;
		padding: 0 16upx;
		background: white;
		border-radius: 16upx;
		display: flex;
		align-items: center;

		image {
			min-width: 90upx;
			width: 90upx;
			height: 90upx;
			margin-right: 16upx;
			border-radius: 90upx;
		}

		.msg-item {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.msg-title {
				display: flex;
				justify-content: space-between;

				view {
					font-size: 36upx;
					font-family: PingFang-SC-Bold;
					font-weight: bold;
				}

				text {
					font-size: 24upx;
					color: #A7A7A7;
				}

			}

			.html-content {
				font-size: 26rpx;
				color: #A7A7A7;
				margin-top: 8upx;

				overflow: hidden;
				word-break: break-all;
				/* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;
				/* 超出部分省略号 */
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1; //两行
			}

		}

	}
</style>
